<template>
	<view id="coupon">
		<Header txt="优惠券" v-if="baidu"></Header>
		<HeaderB txt="优惠券" v-if="!baidu"></HeaderB>
		<view class="no" v-if="no">
			<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E6%97%A0%E4%BC%98%E6%83%A0%E5%88%B8.png" mode="aspectFit"></image>
			<view class="text">
				暂无优惠券可用
			</view>
		</view>
		<view class="" v-if="!no">
			<view class="item" v-for="(item, index) in datalist" :key="index" >
				<view class="items" v-if="item.rebate==1">
					<view class="items dall">
						¥
					</view>
					<view class="items dall mony" >
						{{item.money}}
					</view>			
				</view>
				<view class="items dall" v-if="item.rebate!=1">
					{{item.rebate*10}}折优惠券
				</view>
				<view class="items items2">
					<view class="top">
						满{{item.limitMoney}}元可用
					</view>
					<view class="bom">
						{{item.date}}
					</view>
				</view>
				<view class="items" v-if="item.types == 1">
					<button type="default" @click="goPage">去使用</button>
				</view>
				<view class="disabled" v-if="item.types == 0">
					<image src="" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {formatDate2} from "../../common/com.js"
	export default {
		data() {
			return {
				pageNum:1,
				datalist:'',
				baidu:true,
				no:false,
			}
		},
		onShow() {
			this.listAllCoupon()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		onReachBottom(){
			this.listAllCoupon()
		},
		methods: {
			goPage(){
				uni.switchTab({
				    url: '/pages/buy/buy'
				});
			},
			listAllCoupon(){
				let that = this 
				this.$store
				  .dispatch("ListAllCoupon",{pageNum:this.pageNum})
				  .then((response) => {						  
					if(response.data.code==0){	
						let tar=response.data.obj.coupon
						tar.forEach((item) => {
						    if (item.endTime < new Date().getTime()|| item.status != 1) {
						        item.types = 0;
						    }else{
								item.types = 1;								
							}
							item.date ="截止到" + formatDate2(item.endTime, 2);
						 });								
						that.datalist=[...that.datalist, ...tar]
						that.pageNum++
						if(that.datalist.length<1){
							this.no=true
						}else{
							this.no=false
						}
					}else{
						that.datalist=[]
						if(that.datalist.length<1){
							this.no=true
						}else{
							this.no=false
						}	
					}
				  })
				  .catch(() => {});
			}
		}
	}
</script>

<style lang="less">
	#coupon{			
		background-color: #f6f8fa;
		min-height: 1600rpx;
		overflow: hidden;
		.no{
			background:  #f6f8fa;
			padding-bottom: 85%;
			padding-top: 45%;
			width: 100%;
			height: 100%;
			text-align: center;
			image{
				width: 280rpx;
				height: 200rpx;
			}
			.text{
				margin-top:10rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
		.item{
			width: 92%;
			margin: 0 auto;
			margin-top: 30rpx;
			height: 200rpx;			
			border-radius: 12rpx;
			background-color: #fff !important;	
			border-radius: 12rpx;
			overflow: hidden;
			.dall{
				color: #F96A59;
				padding-left: 20rpx;
			}
			.mony{
				width: 120rpx;
				font-size:48rpx;
				font-weight: bold;
				padding: 0;
			}
		}
		.items{
			display: inline-block;
			height: 200rpx;		
			line-height: 200rpx;
			button{
			    color: #fff;
				font-size: 24rpx;
			    width: 128rpx;
			    height: 48rpx;
			    line-height: 48rpx;
			    text-align: center;
			    background-color: #FF873C;
				margin-left: 10rpx;
			}
		}
		.disabled{
			float: right;
		    // background: url() no-repeat right center;
			width: 160rpx;
			height: 200rpx;
		    background-size: 200rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.items2{
			line-height: 40rpx;
			color: #999999;
			.top{
				color: #222222;
			}
			.bom{
				position: relative;
				top: 20rpx;
			}
		}
	}
</style>
